<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar bgColor="#F3F4F6" :fixed="true">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-left" slot="left">
				<image @click.top="back" class="back" src="https://oss.jxhecong.com/v2/image/back@2x.png"></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="u-left" slot="left" @click.stop="back">
				
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-center" slot="center">
				<view class="tab-item" @click.stop="tabChange(0)">
					<view class="tab-title">电动自行车</view>
					<image v-if="tabIndex==0" class="tab-line" src="https://oss.jxhecong.com/v2/image/Stroke%203@2x.png"></image>
					<view class="dot"></view>
				</view>
				<view class="tab-item" @click.stop="tabChange(1)">
					<view class="tab-title">充电汽车</view>
					<image v-if="tabIndex==1" class="tab-line" src="https://oss.jxhecong.com/v2/image/Stroke%203@2x.png"></image>
					<view class="dot"></view>
				</view>
			</view>
			<!-- #endif -->
		</u-navbar>
		<!-- #endif -->
		<mescroll ref="mescrollRef" :top="navHeight" :down="downOption" :up="upOption" :bottom="0"
			@init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="box">
				<!-- #ifdef MP-ALIPAY -->
				<view class="aliPay-center">
					<view class="tab-item" @click.stop="tabChange(0)">
						<view class="tab-title">电动自行车</view>
						<image v-if="tabIndex==0" class="tab-line" src="https://oss.jxhecong.com/v2/image/Stroke%203@2x.png"></image>
						<view class="dot"></view>
					</view>
					<view class="tab-item" @click.stop="tabChange(1)">
						<view class="tab-title">充电汽车</view>
						<image v-if="tabIndex==1" class="tab-line" src="https://oss.jxhecong.com/v2/image/Stroke%203@2x.png"></image>
						<view class="dot"></view>
					</view>
				</view>
				<view class="swaper-box">
					<bike-site-list ref="bikeSiteList" v-if="tabIndex==0"></bike-site-list>
					<car-site-list ref="carSiteList" v-if="tabIndex==1"></car-site-list>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<bike-site-list ref="bikeSiteList" v-if="tabIndex==0"></bike-site-list>
				<car-site-list ref="carSiteList" v-if="tabIndex==1"></car-site-list>
				<!-- #endif -->
			</view>
		</mescroll>
	</view>
</template>

<script>
	import bikeSiteList from './bikeSiteList.vue'
	import carSiteList from './carSiteList.vue'
	var globalData=getApp({allowDefault: true}).globalData
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import mescroll from "@/components/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import {
		paging
	} from '@/mixins/paging.js'
	import util from '../../utils/util.js'
	export default{
		components:{bikeSiteList,carSiteList,mescroll},
		mixins:[MescrollMixin,paging],
		data(){
			return{
				tabIndex:0,
				navHeight:0
			}
		},
		mounted() {
			// #ifdef MP
			uni.setNavigationBarColor({
				frontColor:'#333333'
			})
			// #endif
		},
		onLoad(options) {
			if(options.index){
				this.tabIndex=options.index
			}
			this.navHeight=util.convertRpx(globalData.titleHeight);
		},
		onShow() {
		  // #ifdef APP-PLUS || APP-NVUE
		  plus.navigator.setStatusBarStyle('dark');
		  // #endif
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			tabChange(index){
				this.tabIndex=index;
				this.$nextTick(()=>{
					this.upCallback({num:1})
				})
			},
			upCallback(page) {
				if(this.tabIndex==0){
					this.$refs['bikeSiteList'].loadNext(page.num,(total,noMore)=>{
						this.mescroll.endSuccess(total, noMore)
					},()=>{
						this.mescroll.endErr();
					})
				} else {
					this.$refs['carSiteList'].loadNext(page.num,(total,noMore)=>{
						this.mescroll.endSuccess(total, noMore)
					},()=>{
						this.mescroll.endErr();
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-left{
			.back{
				width:36rpx;
				height:36rpx;
			}
		}
		.u-center{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items:center;
		}
		.tab-item{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right:30rpx;
			height:70rpx;
		}
		.tab-item:last-child{
			margin-right:0rpx;
		}
		.tab-line{
			width:42rpx;
			height:12rpx;
			margin-top:6rpx;
		}
		/* #ifdef MP-WEIXIN */
		.tab-title{
			color:#303133;
			font-size: 36rpx;
			font-weight:500;
			width:180rpx;
			text-align: center;
		}
		.box{
			margin: 0rpx 30rpx 30rpx 30rpx;
			padding-top:20rpx;
			width:calc(100% - 60rpx);
		}
		/* #endif */
		/* #ifdef MP-ALIPAY */
		.tab-title{
			color:#303133;
			font-size: 34rpx;
			font-weight:500;
			width:180rpx;
			text-align: center;
		}
		.aliPay-center{
			position: fixed;
			width:calc(100% - 60rpx);
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F3F4F6;
			z-index: 999999;
		}
		.swaper-box{
			margin-top: 50px;
		}
		.box{
			margin: -30rpx 30rpx 30rpx 30rpx;
			padding-top:20rpx;
			width:calc(100% - 60rpx);
		}
		/* #endif */
		
		
</style>
